import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
	View,
	StyleSheet,
	ViewPropTypes,
	Text,
	Image,
	FlatList
} from 'react-native';
import ImageBoxS3 from "../image-box/image-box-s3";
import Device from "@greens/device/src/device";

export default class ImageBoxCollection extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dataSource: this.props.dataSource ? this.props.dataSource : [],
			isInternalUpdate:false
		}
		this.itemWidth;
		this.itemHeight;
		this.itemStyle;
	}

	static getDerivedStateFromProps(props,state){
	    console.log("getDerivedStateFromProps:"+JSON.stringify(props))
        console.log("getDerivedStateFromState:"+JSON.stringify(state))
		if (state.isInternalUpdate){
			return state;
		}
		return props;
	}

	onItemChange = (data, tag) => {
		if (data.url == '') {
			this.state.dataSource.splice(parseInt(tag), 1)
		} else {
			this.state.dataSource.splice(parseInt(tag), 1, data)
		}
		let newSources = [];
		newSources = newSources.concat(this.state.dataSource);
		console.log("newSource:" + JSON.stringify(newSources));
		if (!this.props.onDataSourceChange){
            this.setState({"dataSource": newSources,isInternalUpdate:true});
            this.state.isInternalUpdate = false;
        }else{
            this.props.onDataSourceChange(newSources, {
                "media": data,
                "index": parseInt(tag)
            });
        }
	}

	renderItem = ({
					  item: data,
					  index: number
				  }) => {
		if (data) {
			console.log("renderItem"+ JSON.stringify(data))
			let mediaWidth = this.itemStyle.width - this.itemStyle.paddingLeft - this.itemStyle.paddingRight;
			let mediaHeight = this.itemStyle.height - this.itemStyle.paddingTop - this.itemStyle.paddingBottom;
				return (
					<View style={this.itemStyle}>
						<ImageBoxS3
							style={{width: mediaWidth, height: mediaHeight}}
							dataSource={data}
							deleteTextStyle={this.props.deleteTextStyle}
							modifyTextStyle={this.props.modifyTextStyle}
							tag={number.toString()}
							onPickSourceEvent={this.props.onItemPick}
							onImageChange={(data, tag) => {
								this.onItemChange(data, tag);
							}}
							isImageReadOnly={this.props.isReadOnly}
							onPreviewClick={this.props.onPreviewClick}
						/>
					</View>
				)
		}
	}

	// layoutItem = (data, index)=>{
	// 	return {length: this.itemHeight, offset: this.itemHeight * index, index}
	// }

	render() {
		let finalContainerStyle = Object.assign(styles.list, this.props.style);
		this.itemWidth = (finalContainerStyle.width - finalContainerStyle.paddingLeft - finalContainerStyle.paddingRight) / this.props.lineMaxCount;
		this.itemHeight = (this.itemWidth - 5 * 2) * 0.625 + 8 * 2;
		this.itemStyle = {
			width: this.itemWidth,
			height: this.itemHeight,
			backgroundColor: "#FFFFFF",
			paddingTop: 8,
			paddingLeft: 5,
			paddingRight: 5,
			paddingBottom: 8,
		}
		console.log("image-box,ds:"+JSON.stringify(this.state.dataSource))
		return (
			<View style={styles.container}>
				<FlatList
					style={finalContainerStyle}
					data={this.state.dataSource}
					numColumns={this.props.lineMaxCount}
					//getItemLayout={this.layoutItem}
					renderItem={this.renderItem}
					keyExtractor={(item, index) => index.toString()}
				/>
			</View>
		);
	}
}


const styles = StyleSheet.create({
	container: {
		backgroundColor: "#FFFFFF",
		flex: 1,
		paddingTop: 10
	},
	list: {
		width: Device.SCREEN_WIDTH,
		paddingLeft: 10,
		paddingRight: 10,
		paddingBottom: 10,
		backgroundColor: "#FFFFFF"
	}
});

ImageBoxCollection.propTypes = {
	style: ViewPropTypes.style,
	lineMaxCount: PropTypes.number,
	dataSource: PropTypes.array.isRequired,
	deleteTextStyle: Text.propTypes.style,
	modifyTextStyle: Text.propTypes.style,
	onDataSourceChange: PropTypes.func,
	isReadOnly: PropTypes.bool,
	onItemPick: PropTypes.func,
	onPreviewClick:PropTypes.func,
}

ImageBoxCollection.defaultProps = {
	lineMaxCount: 3,
	isReadOnly: false
}
